<div id="collection"
     class="collection content"
     data-bind="with: $root.collection, added_to_view: $root.collection.addedToView, removed_from_view: $root.collection.removedFromView">

  <!-- ko if: conversationEntity() -->
    <div class="content-titlebar">
      <div class="content-titlebar-items-left">
        <span class="content-titlebar-icon icon-close" data-bind="click: clickOnBackButton"></span>
      </div>
      <span class="content-titlebar-items-center" data-bind="text: conversationEntity().display_name()"></span>
    </div>

    <div class="content-list-wrapper">
      <div class="content-list collection-list" data-bind="antiscroll: true">

        <full-search params="search_provider: searchInConversation, change: onInputChange, click: clickOnMessage"></full-search>

        <!-- ko ifnot: searchInput().length -->
          <!-- ko if: images().length -->
            <section class="collection-section" data-bind="attr: {'data-uie-collection-size': images().length}" data-uie-name="collection-section-image">
              <header>
                <span class="collection-header-icon icon-library"></span>
                <span class="label-bold-xs" data-bind="l10n_text: z.string.collectionSectionImages"></span>
                <!-- ko if: images().length > 12 -->
                  <span class="collection-header-all text-theme" data-bind="click: function() { clickOnSection('images', images()) }"><span data-bind="l10n_html: {'id': z.string.collectionShowAll, 'substitute': images().length}" data-uie-name="collection-show-all"></span> <span class="icon-forward font-size-xxs"></span></span>
                <!-- /ko -->
              </header>
              <div class="collection-images">
                <!-- ko foreach: {data: images.slice(0, 12), as: 'messageEntity'} -->
                  <image-component class="collection-image" params="asset: messageEntity.get_first_asset().resource, click: function() {$parent.clickOnImage(messageEntity)}"></image-component>
                <!-- /ko -->
              </div>
            </section>
          <!-- /ko -->

          <!-- ko if: links().length -->
            <section class="collection-section" data-bind="attr: {'data-uie-collection-size': links().length}" data-uie-name="collection-section-link">
              <header>
                <span class="collection-header-icon icon-link"></span>
                <span class="label-bold-xs" data-bind="l10n_text: z.string.collectionSectionLinks"></span>
                <!-- ko if: links().length > 4 -->
                  <span class="collection-header-all text-theme" data-bind="click: function() { clickOnSection('links', links()) }"><span data-bind="l10n_html: {'id': z.string.collectionShowAll, 'substitute': links().length}" data-uie-name="collection-show-all"></span> <span class="icon-forward font-size-xxs"></span></span>
                <!-- /ko -->
              </header>
              <div class="collection-images">
                <!-- ko foreach: {data: links.slice(0, 4), as: 'messageEntity'} -->
                  <link-preview-asset params="message: messageEntity, header: true"></link-preview-asset>
                <!-- /ko -->
              </div>
            </section>
          <!-- /ko -->

          <!-- ko if: audio().length -->
            <section class="collection-section" data-bind="attr: {'data-uie-collection-size': audio().length}" data-uie-name="collection-section-audio">
              <header>
                <span class="collection-header-icon icon-microphone"></span>
                <span class="label-bold-xs" data-bind="l10n_text: z.string.collectionSectionAudio"></span>
                <!-- ko if: audio().length > 4 -->
                  <span class="collection-header-all text-theme" data-bind="click: function() { clickOnSection('audio', audio()) }"><span data-bind="l10n_html: {'id': z.string.collectionShowAll, 'substitute': audio().length}" data-uie-name="collection-show-all"></span> <span class="icon-forward font-size-xxs"></span></span>
                <!-- /ko -->
              </header>
              <div class="collection-images">
                <!-- ko foreach: {data: audio.slice(0, 4), as: 'messageEntity'} -->
                  <audio-asset class="collection-file" params="message: messageEntity, header: true"></audio-asset>
                <!-- /ko -->
              </div>
            </section>
          <!-- /ko -->

          <!-- ko if: files().length -->
            <section class="collection-section" data-bind="attr: {'data-uie-collection-size': files().length}" data-uie-name="collection-section-file">
              <header>
                <span class="collection-header-icon icon-file"></span>
                <span class="label-bold-xs" data-bind="l10n_text: z.string.collectionSectionFiles"></span>
                <!-- ko if: files().length > 4 -->
                  <span class="collection-header-all text-theme" data-bind="click: function() { clickOnSection('files', files()) }"><span data-bind="l10n_html: {'id': z.string.collectionShowAll, 'substitute': files().length}" data-uie-name="collection-show-all"></span> <span class="icon-forward font-size-xxs"></span></span>
                <!-- /ko -->
              </header>
              <div class="collection-images">
                <!-- ko foreach: {data: files.slice(0, 4), as: 'messageEntity'} -->
                  <file-asset class="collection-file" params="message: messageEntity, header: true"></file-asset>
                <!-- /ko -->
              </div>
            </section>
          <!-- /ko -->
        <!-- /ko -->

      </div>
    </div>
  <!-- /ko -->

</div>
